<script setup>
	import { reactive, ref } from 'vue'

	let isRegister = ref(false)
	const formData = ref({
		userName: '',
		password: '',
		rePassword: '',
		role: false,
		storeName: '',
	})

	//清空数据模型
	const clear = () => {
		formData.value.userName = ''
		formData.value.password = ''
		formData.value.rePassword = ''
		formData.value.role = false
		formData.value.storeName = ''
	}

	//校验规则
	const checkRePassword = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请确认密码'))
		} else if (value !== formData.value.password) {
			callback(new Error('两次密码不一致'))
		} else {
			callback()
		}
	}
	const rules = {
		userName: [
			{
				required: true,
				message: '请输入用户名',
				trigger: 'blur',
			},
			{
				min: 5,
				max: 16,
				message: '5-16位非空字符',
				trigger: 'blur',
			},
		],
		password: [
			{
				required: true,
				message: '请输入密码',
				trigger: 'blur',
			},
			{
				min: 5,
				max: 16,
				message: '5-16位非空字符',
				trigger: 'blur',
			},
		],
		rePassword: [
			{
				validator: checkRePassword,
				trigger: 'blur',
			},
		],
	}

	//注册
	import {
		userRegisterService,
		userLoginService,
		getUserInfoService,
	} from '@/api/user'

	import { ElMessage } from 'element-plus'
	const onRegister = async () => {
		let result = await userRegisterService(formData.value)

		ElMessage({
			message: '注册成功',
			type: 'success',
		})
		// console.log(result)
	}
	//登录
	import { useRouter } from 'vue-router'
	import { useRoleStore } from '@/stores/role'
	import { useTokenStore } from '@/stores/token'

	const router = useRouter()
	const tokenStore = useTokenStore()
	const roleStore = useRoleStore()

	const userInfo = ref({})

	const onLogin = async () => {
		let result = await userLoginService(formData.value)
		tokenStore.setToken(result.data)

		let info = await getUserInfoService()
		userInfo.value = info.data

		ElMessage({
			message: '登录成功',
			type: 'success',
		})
		roleStore.setInfo(userInfo.value)

		if (userInfo.value.role == 'true') {
			router.push('/home/manager')
		} else {
			router.push('/home/merchant')
		}
	}
</script>

<template>
	<el-card class="login-card">
		<el-collapse-transition>
			<el-form
				label-position="left"
				:model="formData"
				:hide-required-asterisk="true"
				v-show="!isRegister"
				label-width="auto"
				:rules="rules"
				style="max-width: 600px">
				<el-form-item label="用户名：" prop="userName">
					<el-input
						v-model="formData.userName"
						placeholder="请输入用户名" />
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<el-input
						v-model="formData.password"
						type="password"
						placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="身份：">
					<el-switch
						v-model="formData.role"
						style="
							--el-switch-on-color: #13ce66;
							--el-switch-off-color: #409eff;
						"
						active-text="管理员"
						inactive-text="商户" />
				</el-form-item>

				<el-form-item>
					<el-button type="success" @click="onLogin">登录</el-button>
					<el-button
						type="info"
						@click=";(isRegister = !isRegister), clear()">
						去注册
					</el-button>
				</el-form-item>
			</el-form>
		</el-collapse-transition>

		<el-collapse-transition>
			<el-form
				label-position="left"
				:model="formData"
				label-width="auto"
				:rules="rules"
				:hide-required-asterisk="true"
				v-show="isRegister"
				style="max-width: 600px">
				<el-form-item label="用户名：" prop="userName">
					<el-input
						v-model="formData.userName"
						placeholder="请输入用户名" />
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<el-input
						v-model="formData.password"
						type="password"
						placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="确认密码：" prop="rePassword">
					<el-input
						v-model="formData.rePassword"
						type="password"
						placeholder="请再次输入密码" />
				</el-form-item>
				<el-form-item label="身份：">
					<el-switch
						v-model="formData.role"
						style="
							--el-switch-on-color: #13ce66;
							--el-switch-off-color: #409eff;
						"
						active-text="管理员"
						inactive-text="商户" />
				</el-form-item>
				<el-form-item label="商铺：" v-if="!formData.role">
					<el-input
						v-model="formData.storeName"
						placeholder="请输入商铺名" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onRegister"
						>注册</el-button
					>
					<el-button
						type="info"
						@click=";(isRegister = !isRegister), clear()">
						去登录
					</el-button>
				</el-form-item>
			</el-form>
		</el-collapse-transition>
	</el-card>
</template>

<style scoped>
	.login-card {
		max-width: 500px;
		margin: 100px auto;
		background-image: url(@/assets/logo.svg);
		background-size: auto;
		background-repeat: no-repeat;
		background-position: center;
	}
</style>
